<template>
  <el-sub-menu :index="subIndex" v-if="subMenu.children?.length" :teleported="false">
    <template #title>{{ subMenu.meta?.title }}</template>
    <template v-for="(menu, index) in subMenu.children" :key="index">
      <MenuItem :subIndex="`${subIndex}-${index}`" :subMenu="menu" />
    </template>
  </el-sub-menu>
  <el-menu-item v-else :index="`${subIndex}`" @click="handleMenuItem(subMenu)">
    <span>{{ subMenu.meta?.title }}</span>
  </el-menu-item>
</template>
<script setup lang="ts">
import type { menuItem } from './types/index';
import { useRouter } from 'vue-router';
import MenuItem from '@com/Navigation/src/Menu/MenuItem.vue';

defineProps({
  subIndex: {
    type: [String, Number],
    required: true,
  },
  subMenu: {
    type: Object as () => menuItem,
    required: true,
  },
});

const router = useRouter();

const handleMenuItem = (data: menuItem) => {
  router.push(data.path);
};
</script>
<style lang="scss" scoped></style>
